<template>
  <view>
    <view class="flex-col justify-start relative page">
      <view class="section_2"></view>
      <view class="section pos"></view>
      <view class="flex-col justify-start items-center section_3 pos_3">
        <view class="flex-col justify-start section_5">
          <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">完善资料</text></view>
        </view>
        <view class="flex-col section_4 pos_4">
          <view class="self-stretch">
            <text class="font text_2">
              为了更好地服务您，我们需要了解一些您的基本信息，可以根据您的兴趣选择标签，我们会根据您的需求提供个性化内容。
              <br />
            </text>
            <text class="font text_3">请放心，你的隐私将得到保护！</text>
          </view>
          <text class="self-center font text_5 mt-99">稍后填写</text>
        </view>
        <view class="flex-col justify-start items-end image-wrapper pos_2">
          <image class="image"
            src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=255813bf4f52bc7c742e96a61b57ba15.png" />
        </view>
      </view>
      <text class="text pos_5">开启智能对话体验</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    };
  }
}
</script>

<style lang="scss" scoped>
.mt-99 {
  margin-top: 198rpx;
}

.page {
  background-color: #fffffa;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=e50327b8e9f985f55888414a420509d2.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section_2 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=e50327b8e9f985f55888414a420509d2.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1624rpx;
}

.section {
  background-color: #00000099;
  width: 750rpx;
  height: 1624rpx;
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: -80rpx;
}

.section_3 {
  padding: 574rpx 0 176rpx;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
}

.pos_3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 768rpx;
}

.section_5 {
  padding: 4rpx 0;
  border-radius: 48rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=11c582b44d72891c3fc0474aaeafe6e4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 472rpx;
}

.text-wrapper {
  padding: 36rpx 0 32rpx;
  background-color: #ffe944;
  border-radius: 74rpx;
  width: 470rpx;
}

.text_4 {
  color: #333333;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 34.3rpx;
}

.section_4 {
  padding: 324rpx 76rpx 120rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=79c7f9ad799b08e17b7636c35a8f153a-.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.pos_4 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.font {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 47.6rpx;
}

.text_2 {
  color: #666666;
  text-align: justify;
}

.text_3 {
  color: #333333;
}

.text_5 {
  color: #999999;
  line-height: 25.82rpx;
}

.image-wrapper {
  padding: 64rpx 0 280rpx;
  background-image: url('@/static/mie/2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: -134rpx;
}

.image {
  margin-right: 44rpx;
  width: 32rpx;
  height: 32rpx;
}

.text {
  color: #333333;
  font-size: 40rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 38.2rpx;
}

.pos_5 {
  position: absolute;
  left: 50%;
  bottom: 592.24rpx;
  transform: translateX(-50%);
}</style>
    
      